<template>
	<view id="register">
		<Header txt="注册关联" v-if="baidu"></Header>
		<HeaderB txt="注册关联" v-if="!baidu"></HeaderB>
		<text class="title">注册</text>
		<view class="data">
			<view class="name">
				<input type="text" value="" placeholder="请输入用户名" v-model="reginformation.userName" @input="input" />
				<view class="text" v-if="text1" @focus="input">!</view>
				<view class="text text2" v-if="text2" @focus="input">√</view>
				<view class="text text3" v-if="text3" @focus="input">!</view>
			</view>			
			<input type="text" value="" placeholder="请输入手机号" v-model="reginformation.mobile" @focus="input2" />
			<view class="send">
				<input type="text" value="" placeholder="请输入图形码"  v-model="captcha" />
				<button    type="primary" v-if="isImg" @click="refresh()" class="bbtn">获取图形码</button>
				<view class="canvas-img-code" v-if="!isImg" @click="refresh()">
					<canvas :style="{width:width+'px',height:height+'px'}" canvas-id="imgcanvas" @error="canvasIdErrorCallback"></canvas>
				</view>
			</view>
			<view class="send">
				<input type="text" value="" placeholder="请输入验证码"  v-model="reginformation.validateCode" @focus="input2" />
				<button  type="primary" v-if="!btnDisabled" class="bbtn" @click="getCode">{{btnText}}</button>
				<button  type="default" v-if="btnDisabled" class="bbtn" @click="getCode">{{btnText}}</button>
			</view>
			<view class="pas">
				<input type="password" password=true value="" placeholder="请输入密码" v-model="reginformation.password" @focus="input2"/>
				<view class="span1">					
				</view>
			</view>	
			<view class="btn">
					<button type="primary"  @click="getRegister" class="res bbtn">注册</button>
					<button type="default" @click="gofo" class="log">去登陆</button>
			</view>			
		</view>
		
	</view>
</template>
<script>
	export default {
		data() {
			return {
				text1:true,
				text2:false,
				text3:false,
				captcha:"",
				verCode: "tyhc", //图形码
				width: 120,
				height: 48,
				isImg:true,
				baidu:true
			};
		},
		computed:{
			reginformation() {
			      return this.$store.state.reginformation;
			    },
			 btnText() {
			      return this.$store.state.btnText;
			    },
			btnDisabled() {
			      return this.$store.state.btnDisabled;
			},
		},
		onShow(){
			// #ifdef MP-BAIDU
			this.baidu=false
			// #endif
		},
		methods:{
			// 图形码
			init() {
				var context = uni.createCanvasContext('imgcanvas', this),
					w = this.width,
					h = this.height;
				context.setFillStyle("white");
				context.setLineWidth(5);
				context.fillRect(0, 0, w, h);
				var pool =this.verCode
					let str = '';
				for (var i = 0; i < 4; i++) {
					var c = pool[i];
					var deg = this.rn(-30, 30);
					context.setFontSize(18);
					context.setTextBaseline("top");
					context.setFillStyle(this.rc(80, 150));
					context.save();
					context.translate(30 * i + 15, parseInt(h / 1.5));
					context.rotate(deg * Math.PI / 180);
					context.fillText(c, -15 + 5, -15);
					context.restore();
					str += c;
				}
				uni.setStorage({
					key: 'imgcode',
					data: str,
				});
				for (var i = 0; i < 40; i++) {
					context.beginPath();
					context.arc(this.rn(0, w), this.rn(0, h), 1, 0, 2 * Math.PI);
					context.closePath();
					context.setFillStyle(this.rc(150, 200));
					context.fill();
				}
				context.draw();
				console.log('end');
			},
			rc: function(min, max) {
				var r = this.rn(min, max);
				var g = this.rn(min, max);
				var b = this.rn(min, max);
				return "rgb(" + r + "," + g + "," + b + ")";
			},
			rn: function(max, min) {
				return parseInt(Math.random() * (max - min)) + min;
			},
			refresh: function() {
				this.isImg=false
				this.$store.dispatch("ClientStartCaptcha",{}).then((response)=>{
					if (response.data.code == 0) {
						this.verCode = response.data.obj
						this.init(); 
						// #ifdef MP-WEIXIN
						uni.setStorageSync('SendCookie', response.header['Set-Cookie']);
						// #endif
						// #ifdef MP-BAIDU
						uni.setStorageSync('SendCookie', response.header['set-cookie']);
						if(response.header['set-cookie']==''||response.header['set-cookie']==null||response.header['set-cookie']==undefined){
							uni.setStorageSync('SendCookie', response.header['Set-Cookie']);
						}
						// #endif   
						// #ifdef MP-ALIPAY
						this.captcha=this.verCode
						// #endif 
					}
				})
				
			},
			canvasIdErrorCallback: function(e) {
				console.error(e.detail.errMsg)
			},
			gofo(){
				uni.navigateTo({
					url:"/pages/login/login"
				})
			},
			input(){
				this.text1=false
				if(this.reginformation.userName==''){
					this.text3=true
					this.text2=false
				}else{
					this.text3=false
					this.text2=true
				}
			},
			input2(){
				this.text1=false
				if(this.reginformation.userName==''||this.reginformation.userName==null){
					this.text3=true
					this.text2=false
				}else{
					this.text3=false
					this.text2=true
				}
			},
			// 获取验证码
		    getCode() {					
		      let that = this;
		      if (this.reginformation.mobile == null||this.reginformation.mobile=='') {				
		        this.$store.commit("SET_ERRORINFORMATION", {
		          mes: "请填写手机号",
		          icon: "error",
		        });
		        return false;
		      } else if (!/^1\d{10}$/.test(this.reginformation.mobile)) {
		        this.$store.commit("SET_ERRORINFORMATION", {
		          mes: "手机号码格式有误",
		          icon: "error",
		        });
		        return false;
		      }
		      setTimeout(() => {
		        this.$store.commit("SET_GEETSTATUS", "register");
				let _params = {
				        type: 1,
				        mobile: this.reginformation.mobile,
						captcha:this.captcha
				      };
				this.$store
				  .dispatch("SendCode", _params)
				  .then((response) => {
					  let dataCode = response;
					    if (dataCode.data.code == 0) {
							that.sendMessage();
					        that.$store.commit("SET_INFORMATION", {
					            mes: "已发送",
					            icon: "success",
					        });					    
					     }else if(dataCode.data.msg == "验证码错误!") {
					    	that.$store.commit("SET_ERRORINFORMATION", {
					    		mes: "图形码错误,注意大小写,请重新输入图形码,再尝试",
					    		icon: "error",
					    	});
							that.captcha=""
					    	that.refresh()
					    }else{
					    	that.$store.commit("SET_ERRORINFORMATION", {
					    	 	mes: dataCode.data.msg,
					    	 	icon: "error",
					    	});
					    }
				  })
				  .catch(() => {});
		      }, 600);
		    },
			// 发短信
			sendMessage(){
				let btnDisabled = this.$store.state.btnDisabled;
				if (btnDisabled) {
				    return;
				}
				this.getSecond(60);
			},
			//发送验证码
		    getSecond(wait) {
		      // console.log(wait);
		      let _this = this;
		      let _wait = wait;
		      if (wait == 0) {
		        this.$store.commit("SET_DISABLE", false);
		        this.$store.commit("SET_BTNTEXT", "获取验证码");
		        wait = _wait;
		      } else {
		        // console.log(wait);
		        this.$store.commit("SET_DISABLE", true);
		        // this.btnText = "验证码(" + wait + "s)";
		        this.$store.commit("SET_BTNTEXT", "(" + wait + "s)再次获取");
		        wait--;
		        setTimeout(function() {
		          _this.getSecond(wait);
		        }, 1000);
		      }
		    },	
			// 注册
		    getRegister() {
				let that=this
		      if (
		        !/^1\d{10}$/.test(this.reginformation.mobile) ||
		        this.reginformation.password == null ||
		        this.reginformation.userName == null ||
		        (this.reginformation.userName !== undefined &&
		          this.reginformation.userName.length < 2) ||
		        (this.reginformation.password !== undefined &&
		          this.reginformation.password.length < 6) ||
		        this.reginformation.validateCode == null
		      ) {
		        this.$store.commit("SET_ERRORINFORMATION", {
		          mes: "存在未填写或未符合要求的选项",
		          icon: "error",
		        });
		        return false;
		      }
		      this.$store
		        .dispatch("WeixinRegister", this.reginformation)
		        .then((res) => {
					if(res.data.code==0){
						that.$store.commit("SET_INFORMATION", {
						    mes: "注册成功",
						    icon: "success",
						});
					}else{
						that.$store.commit("SET_ERRORINFORMATION", {
						  mes:res.data.msg,
						  icon: "error",
						});
					}
		        })
		        .catch(() => {});
		    },	
		}
		
	}
</script>

<style lang="less">
	#register{
		width: 92%;
		margin: 0 auto;
		.btn{
			button{
				margin:  0 auto;
				margin-bottom: 20rpx;
			}
		}
		.title{
			display: inline-block;
			font-size: 50rpx;
			color: #222222;
			font-weight: bold;
			margin-top: 80rpx;
			margin-bottom: 96rpx;
		}
		button::after{
			border:none;
		}
		input{
			background-color: #f4f4f4 !important;
			padding-left: 38rpx;
			padding-right: 160rpx;
			height: 96rpx;
			color: #9a9a9a;
			margin-bottom: 36rpx;
			border-radius: 100rpx;
		}
		.send{
			position: relative;
			button{
				height: 50rpx;
				line-height: 50rpx;
				font-size: 24rpx;
				display: inline-block;
				padding: 0 10rpx;
				border-radius: 200rpx;
				padding: 0 16rpx;
				position: absolute;
				top: 23rpx;
				right: 23rpx;
			}
			.canvas-img-code{
				position: absolute;
				top: 0;
				right: 0;
			}
		}
		.name{
			position: relative;
			.text{
				width: 40rpx;
				height: 40rpx;
				border-radius: 50%;
				background: #10aeff;
				content: "\E614";
				color: #FFF;
				font-size: 32rpx;
				position: absolute;
				top: 28rpx;
				right: 23rpx;
				text-align: center;
			}
			.text2{
				background: #09bb07;
			}
			.text3{
				background: #f43530;
			}
		}
		.res{
			width: 60%;
			border-radius: 100rpx;
			margin-bottom: 40rpx;
		}
		.bbtn{
			background: #3474fc;
		}
		.log{
			border-radius: 100rpx;
			width: 40%;
			border: none;
			border: 2rpx solid #ccc;
			color: #808080;
		}
	}
</style>

